<script>
export default {
  created() {
      this.select();
  },
  name: "User",
  data() {
    return {
      up:true,
      up1:false,
      uid6:window.sessionStorage.getItem('userId1'),
      // 图片地址
      imageUrl: '',
      imageUrl1: '',
      // 注册表单对象
      registerForm: {
        userName: '',
        phone: '',
        email: '',
        userAvatar: '',
        userSex: '',
        userNickname: '',
      },
      registerForm1: {
        userId: window.sessionStorage.getItem('userId1'),
        userName: '',
        phone: '',
        email: '',
        userAvatar: '',
        userSex: '',
        userNickname: '',
      }
    };
  },
  methods:{
    //取消
    handleReset2() {
      //放弃修改
      this.select()
      this.up=true
      this.up1=false
    },
          select(){
            uid6:window.sessionStorage.getItem('userId1')
                if(this.uid6!=null){
                  //调用方法获取registerForm
                  this.$axios.post(`/zhuche/selectById1/${this.uid6}`).then(res => {
                    console.log(6666,res.data)
                    this.registerForm = res.data
                    this.registerForm1 = res.data
                    this.imageUrl=res.data.userAvatar
                    this.imageUrl1 = res.data.userAvatar
                  })
                }
              else {
                alert("请先登账号再进行操作")
                this.$router.push('/Login')
                }
          },
          //修改
          handleReset() {
              this.bles=false
            //使span变成input
              this.up=false
            this.up1=true
          },
    //完成
    handleReset1() {
            //获取registerForm1的数
            this.$axios.post(`/zhuche/updateById`,this.registerForm1).then(res => {
              console.log(6666,res.data)
              this.select()
            })
            //调用方法select
      //使span变成input
      this.up=true
      this.up1=false
    },
    //图片上传成功
    handleAvatarSuccess(res, file) {
      console.log(res,7777);
      this.imageUrl = URL.createObjectURL(file.raw);
      this.imageUrl1 = URL.createObjectURL(file.raw);
      this.registerForm.userAvatar =res;
      this.registerForm1.userAvatar =res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }
}
</script>

<template>
  <div id="User">
    <!--个人信息-->
    <el-row v-show="up" style="margin: auto;">
      <el-col :span="12">
        <el-form :model="registerForm" label-width="80px" style="margin: auto;width: 900px;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="" prop="picture" class="color1">
                <el-upload
                    :disabled="true"
                    v-model="registerForm.userAvatar"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="用户名" class="color1">
                <span>{{registerForm.userName}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="手机号" class="color1">
                <span class="type">{{registerForm.phone}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮箱" class="color1">
                <span>{{registerForm.email}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="性别" class="color1">
                <template>
                  <span>{{registerForm.userSex}}</span>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="昵称" class="color1">
                <span>{{registerForm.userNickname}}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <el-button style="width: 100px;background-color:#B3C0D1;border: gray"  @click="handleReset">修改信息</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <el-row v-show="up1" style="margin: auto;">
      <el-col :span="12">
        <el-form :model="registerForm1" label-width="80px" style="margin: auto;width: 900px;">
          <el-row>
            <el-col :span="6">
              <el-form-item label="" prop="picture" class="color1">
                <el-upload
                    v-model="registerForm1.userAvatar"
                    name="picture"
                    class="avatar-uploader"
                    action="http://localhost:9999/zhuche/image"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="用户名" class="color1">
                <el-input v-model="registerForm1.userName"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="手机号" class="color1">
                <el-input v-model="registerForm1.phone"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="邮箱" class="color1">
                <el-input v-model="registerForm1.email"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="性别" class="color1">
                <template>
                  <el-radio v-model="registerForm1.userSex" label="男" style="color: crimson"></el-radio>
                  <el-radio v-model="registerForm1.userSex" label="女" style="color: crimson"></el-radio>
<!--                  <el-input v-model="registerForm1.userSex"></el-input>-->
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="昵称" class="color1">
                <el-input v-model="registerForm1.userNickname"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" round  @click="handleReset1">完成</el-button>
                <el-button type="primary" round  @click="handleReset2">取消</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style>
  .color1 .el-form-item__label {
    color: cornflowerblue;
  }

  .color2 .el-form-item__label {
    color: crimson;
  }

  .color3 .el-form-item__label {
    color: crimson;
  }

  .avatar-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border: 1px dashed #d9d9d9;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
  }

  .avatar-uploader .el-upload {
    width: 100%;
    height: 100%;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
  }

  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }

</style>